<template>
  <div class="carbon-reduction-page">
    <el-card shadow="never" class="page-header">
      <h3>减排目标与碳汇抵消管理</h3>
    </el-card>

    <!-- 减排目标设置区域 -->
    <div class="reduction-targets">
      <el-form label-width="120px">
        <el-form-item label="年度减排目标（吨CO₂当量）">
          <el-input v-model.number="annualReductionTarget"></el-input>
        </el-form-item>
        
        <el-form-item label="部门减排分配">
          <el-select v-model="department" placeholder="请选择部门">
            <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="setReductionTarget">设定目标</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 碳汇抵消记录表格 -->
    <div class="carbon-offset-records">
      <h4>碳汇抵消记录</h4>
      <el-table :data="carbonOffsetRecords" border style="width: 100%">
        <el-table-column prop="projectName" label="项目名称" width="200"></el-table-column>
        <el-table-column prop="offsetAmount" label="抵消量（吨CO₂当量）" width="150"></el-table-column>
        <el-table-column prop="acquisitionDate" label="获取日期" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 'active'" class="status-label success">已生效</span>
            <span v-else-if="scope.row.status === 'pending'" class="status-label warning">待审核</span>
            <span v-else class="status-label danger">未通过</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="viewDetail(scope.$index)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加碳汇抵消记录按钮 -->
    <div class="add-offset-btn">
      <el-button type="success" @click="openAddModal">新增碳汇抵消记录</el-button>
    </div>

    <!-- 新增/编辑碳汇抵消记录模态框 -->
    <el-dialog title="新增碳汇抵消记录" :visible.sync="addModalVisible" width="50%">
      <el-form ref="addForm" :model="newCarbonOffset" label-width="120px">
        <!-- 表单内容省略，包括项目名称、抵消量、获取方式等字段 -->
        <el-form-item>
          <el-button type="primary" @click="submitNewOffset">提交</el-button>
          <el-button @click="closeAddModal">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      annualReductionTarget: '',
      department: '',
      departments: [], // 部门列表数据结构 { id: '', name: '' }
      carbonOffsetRecords: [], // 碳汇抵消记录列表
      addModalVisible: false,
      newCarbonOffset: {
        projectName: '',
        offsetAmount: '',
        acquisitionDate: '',
        status: 'pending',
        // 其他相关字段...
      },
    };
  },
  methods: {
    setReductionTarget() {
      // 提交减排目标到后端API
      this.submitReductionTarget();
    },
    
    submitReductionTarget() {
      // 实现提交减排目标到服务器的逻辑
      // ...
    },

    viewDetail() {
      // 查看详细信息的逻辑，可能跳转到另一个页面或打开模态框
      // ...
    },

    openAddModal() {
      this.addModalVisible = true;
    },

    closeAddModal() {
      this.addModalVisible = false;
      this.$refs.addForm.resetFields(); // 清空表单
    },

    submitNewOffset() {
      // 提交新的碳汇抵消记录至服务器
      this.saveCarbonOffsetRecord(this.newCarbonOffset);
    },

    saveCarbonOffsetRecord() {
      // 实现保存新碳汇抵消记录到后端API的逻辑
      // ...
    },
  },
};
</script>

<style scoped>
.status-label {
  display: inline-block;
  padding: 2px 5px;
  border-radius: 4px;
}
.status-label.success {
  color: #fff;
  background-color: #67C23A;
}
.status-label.warning {
  color: #fff;
  background-color: #E6A23C;
}
.status-label.danger {
  color: #fff;
  background-color: #F56C6C;
}
</style>